<template>
  <div>
    <el-card style="width: 50%;margin-left: 30px;">
      <h3 style="text-align: center;margin-bottom: 20px;">个人中心</h3>
      <el-form ref="form" :rules="rules" :model="user" label-width="80px" style="padding-right: 20px;">
        <div style="text-align: center;margin-bottom: 10px;">
          <el-upload class="avatar-uploader" action="http://localhost:8090/common/upload?module=cover"
            :show-file-list="false" :on-success="handleCoverSuccess">
            <img v-if="user.cover" :src="user.cover" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </div>
        <el-form-item label="账号" prop="no">
          <el-input v-model="user.no" placeholder="账号" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          <el-input v-model="user.name" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="user.age" placeholder="账号"></el-input>
        </el-form-item>
        <!-- <el-form-item label="性别" prop="sex">
            <el-input v-model="user.sex" placeholder="账号"></el-input>
          </el-form-item> -->
        <el-form-item label="性别" prop="sex">
          <div style="border: 1px solid rgb(220, 218, 218);border-radius: 5%;">
            <input type="radio" v-model="user.sex" value="1" style="margin-left: 20px;">男
            <input type="radio" v-model="user.sex" value="0" style="margin-left: 40px;">女
          </div>

        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="user.phone" placeholder="电话"></el-input>
        </el-form-item>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="success" @click="update()">确认修改</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Person",
  data() {
    // let checkAge = (rule, value, callback) => {
    //   if (value > 130) {
    //     callback(new Error('年龄输入过大'));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      user: JSON.parse(sessionStorage.getItem('CurUser')),
      cover: '',
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        // age: [
        //   { required: true, message: '请输入年龄', trigger: 'blur' },
        //   { min: 1, max: 3, message: '长度在 1 到 3 个位', trigger: 'blur' },
        //   { pattern: /^([1-9][0-9]*){1,3}$/, message: '年龄必须为正整数字', trigger: 'blur' },
        //   { validator: checkAge, trigger: 'blur' }
        // ],
        phone: [
          { required: true, message: '电话号码不能为空', trigger: 'blur' },
          { pattern: /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],

      }
    };

  },
  created() {
    // 初始化时设置 selectedSex 的值为当前用户的性别
    // this.selectedSex = String(this.user.sex);
  },
  methods: {
    update() {
      this.$refs.form.validate((valid) => {
        if (valid) {  //valid成功为true,失败为false
          //去后台验证用户密码
          //保存当前用户信息到数据库
          this.$axios.post(this.$httpUrl + '/user/update', this.user).then(res => res.data).then(res => {
            console.log(res)
            if (res.code == 200) {
              //成功更新
              this.$message.success('修改成功')
              //更新浏览器缓存的用户信息
              sessionStorage.setItem("CurUser", JSON.stringify(this.user))
              //强制刷新页面
              // setTimeout(() => {
              //   location.reload();
              // }), 1000; // 等待一秒后刷新页面，给用户足够的时间看到成功的消息
            } else {
              this.$message.error(res.msg)
            }
          });
        } else {
          // this.confirm_disabled = false;
          this.$message({
            message: '修改失败！请确认信息是否正确！',
            type: 'error'
          });
          return false;
        }
      });




    },
    //头像上传
    handleCoverSuccess(res, file) {
      this.user.cover = `http://localhost:8090/common/download?name=${res.content}`
      //手动触发一下头像字段的校验
      // this.$refs.formName.validateField("cover")
      // this.user.cover = res.data
      //强制刷新一下
      this.$forceUpdate();
    },
  },
}
</script>

<style scoped>
.person {
  margin-left: 40px;
  margin-top: 40px;
  box-shadow: 0px 0px 20px -10px #0a1032;
  width: 80%;
  text-align: center;

}

/* .el-descriptions__title {
    margin: 20px;
} */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.el-upload {
  border-radius: 50%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border-radius: 50%;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
}
</style>